<template>
    <div>
        <v-progress-linear v-if="loading" indeterminate ></v-progress-linear>
         <v-app-bar app elevation="0" dense color="white">
            <v-btn icon @click="$router.go(-1)">
                <v-icon>mdi-arrow-left</v-icon>
            </v-btn>
            <v-toolbar-title class="text-center flex-grow-1 subtitle-1">设置</v-toolbar-title>
            <v-btn plain text :ripple="false">
            </v-btn>
        </v-app-bar>

        <v-container>
            <v-expansion-panels multiple >
                <v-expansion-panel class="mb-2 rounded-lg" >
                    <v-expansion-panel-header>用户隐私协议</v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <div v-html="privacy"></div>
                    </v-expansion-panel-content>
                </v-expansion-panel>

                <v-expansion-panel class="mb-2 rounded-lg" >
                    <v-expansion-panel-header>用户注册协议</v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <div v-html="license"></div>
                    </v-expansion-panel-content>
                </v-expansion-panel>

                <v-expansion-panel class="mb-2 rounded-lg">
                    <v-expansion-panel-header>信贷经理合作行为规定</v-expansion-panel-header>
                    <v-expansion-panel-content>
                        <div v-html="rules"></div>
                    </v-expansion-panel-content>
                </v-expansion-panel>
            </v-expansion-panels>

            <v-btn block depressed v-if="uid > 0" class="rounded-lg mb-2" large color="primary"  @click="logout">退出</v-btn>

            <v-btn block depressed link  v-else class="rounded-lg mb-2" large color="primary" :to="`/login`">登录</v-btn>
        </v-container>
    </div>
</template>

<script>
import axios from "axios";
import { mapGetters } from 'vuex';

export default {
    data: () => ({
        privacy: '',
        license: '',
        rules: '',
        loading: false
    }),

    computed: {
        ...mapGetters([
            'uid'
        ]),
    },

    created() {
        this.load();
    },

    methods: {
        load() {
            this.loading = true;
            const that = this;
            axios.get(`/v1/about`).then((response) => {
                if (response.data.code == 0) {
                    that.privacy = response.data.data.privacy;
                    that.license = response.data.data.license;
                    that.rules = response.data.data.rules;
                 } else {
                    that.$toasted.show(response.data.msg, {type: "error"});
                 }
            })
            .catch(function () {})
            .then(function () {
                that.loading = false;
            });
        },
        logout() {
             const that = this;
             axios.post(`/v1/logout`).then(_ => {
                that.$store.dispatch("token", null);
                that.$store.dispatch("user", null);
                window.location.reload();
            })
            .catch(function () {})
            .then(function () {
            });
        }
    }
};
</script>

<style lang="scss" scoped>

.v-expansion-panel:before {
    box-shadow: none;
}

.v-expansion-panel::after, .v-expansion-panel:not(:first-child):after {
    border: none;
}

</style>
